import React,{Component} from 'react';
import { Link } from 'react-router-dom';
import {Button} from 'element-react';
import 'element-theme-default';

import {connect} from 'react-redux'
import mapDispatchToProps from '../actions/mapDispatchToProps'
import mapStateToProps from '../value/mapStateToProps'
 class  Register extends Component{
    constructor(props){
	   super(props);
	   this.state={
		   bstop:false
	   }
	}
	emailChange(){      
		if ($('#inputEmail').val() == '') {
		 $('.span1').css({"display":"block","background":"red"}).text('请输入内容')  
		this.setState({
			bstop:false
		})   
	 }
	 else {
		 if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($('#inputEmail').val()) == false) {
			 $('.span1').css({"display":"block","background":"red"}).text(" 邮箱格式不正确，请重新填写");    
			 this.setState({
				bstop:false
			})      
		 }
		 else {
			 $('.span1').css({"display":"block","background":"greenyellow"}).text("邮箱格式正确");
			 this.setState({
				bstop:true
			}) 
		 }
	 }
 }
 passChange(){
	 if ($('#inputPassword').val() == '') {
		 $('.span3').css({"display":"block","background":"red"}).text('请输入6位数字密码')   
		 this.setState({
			bstop:false
		})  
	 }
	 else {
		 if (/^\d{6}$/.test($('#inputPassword').val()) == false) {
			 $('.span3').css({"display":"block","background":"red"}).text("密码格式不正确，请重新填写");   
			 this.setState({
				bstop:false
			})      
		 }
		 else {
			 $('.span3').css({"display":"block","background":"greenyellow"}).text("密码格式正确");
			 this.setState({
				bstop:true
			}) 
		 }
	 }
 }
 comfimpass(){
	if ($('#confirmPassword').val() == '') {
		$('.span4').css({"display":"block","background":"red"}).text('请再次输入密码')     
		this.setState({
			bstop:false
		})   
	}
	else {
		if ($('#confirmPassword').val() == $('#inputPassword').val()) {
			 $('.span4').css({"display":"block","background":"greenyellow"}).text("再次输入密码正确");
			 this.setState({
				bstop:true
			})        
		}
		else {			
			$('.span4').css({"display":"block","background":"red"}).text("密码格式不正确，请重新填写");  
			this.setState({
				bstop:false
			})  
		}
	}
}
nameChange(){
	if($('#name').val() == ''){
		$('.span2').css({"display":"block","background":"red"}).text('请输入昵称') 
		this.setState({
			bstop:false
		}) 
	}else{
		$('.span2').css({"display":"block","background":"green"}).text('ok') 
		this.setState({
			bstop:true
		}) 
	}
}
useRegister=()=>{
	if(this.state.bstop && $('#name').val() != '' && $('#confirmPassword').val() != '' && $('#inputPassword').val() != '' && $('#inputEmail').val() != '' ){
        this.props.usesRegister({
		email:$('#inputEmail').val(),
		password:$('#inputPassword').val(),
		name:$('#name').val()
	})
	}else{
		alert("填写不规范，请重新填写")
	}
	
}
render(){
    var style={
		margin:"20px"
	}
	var inputwarnimg={
		padding:'0px',
		marginLeft:"20px",
		marginRight:"20px",
		display:"none"
	}	
	if(this.props.registerstate){
         var registerview=(
		 <div>
			 <h2>注册成功</h2>
			 <Button onClick={this.props.changeRegester}>
			     <Link to="/" className="active">点击去首页</Link>
			 </Button>						
						
				
		</div>
			 )
	    
	}else{
        var registerview=(
			    <div>
			    <h3>注册页面</h3>   
				<div className="input-group" style={style}>
					<span className="input-group-addon" id="basic-addon1">请输入邮箱</span>
					<input type="email" id="inputEmail" onBlur={this.emailChange.bind(this)} className="form-control" placeholder="email"aria-describedby="basic-addon1" />			 		
				</div>
				<div className="alert  span1" style={inputwarnimg} role="alert"></div>
				<div className="input-group"  style={style}>
					<span className="input-group-addon" id="basic-addon1">请输入昵称</span>
					<input type="text" className="form-control" id="name" onBlur={this.nameChange.bind(this)} placeholder="Username" aria-describedby="basic-addon1"/>				
				</div>
				<div className="alert  span2" style={inputwarnimg} role="alert"></div>
				<div className="input-group"  style={style}>
					<span className="input-group-addon" id="basic-addon1">请输如密码</span>
					<input type="password" id="inputPassword"  onBlur={this.passChange.bind(this)} className="form-control" placeholder="密码" aria-describedby="basic-addon1"/>				
				</div>
				<div className="alert  span3" style={inputwarnimg} role="alert"></div>
				<div className="input-group" style={style}>
					<span className="input-group-addon" id="basic-addon1">请确认密码</span>
					<input type="password" onBlur={this.comfimpass.bind(this)} className="form-control" id="confirmPassword" placeholder="再次输入密码" aria-describedby="basic-addon1"/>				
				</div>
				<div className="alert span4" style={inputwarnimg} role="alert"></div>
				<Button type="info" onClick={this.useRegister} style={{marginLeft:"50%",position:"relative",left:"-60px"}} >确认注册</Button>	
				</div>	
		)
	}
		return (
			<div>
                {registerview}		           				
			</div>
		)
	}
}

export default connect(mapStateToProps,mapDispatchToProps)(Register)